<!DOCTYPE html>
<html>

<head>
  <title>Demo 7</title>
  <style>
    div {
      border-style: solid;
      border-color: rgb(180, 65, 65);
    }

    span {
      border-style: solid;
      border-color: black;
    }
  </style>
  
</head>

<body>
  <div class="container">
    <span>First</span>
    <span>Second</span>
  </div>

  <div class="container">
    <span>First</span>
    <span>Second</span>
  </div>
  
  <label for="display">Choose a display value:</label>
  <select id="display">
    <option selected>block</option>
    <option>inline</option>
    <option>inline-block</option>
    <option>none</option>
  </select>
</body>
<script type="text/javascript">
  var eles = document.querySelectorAll('.container');
  var slt = document.getElementById('display');

  function updateDisplay() {
    eles.forEach((ele) => {
      ele.style.display = slt.value;
    });
  }

    slt.addEventListener('change', updateDisplay);

    updateDisplay();

</script>
</html>